let regBtn = document.querySelector(".reg-btn");
let regIpts = document.querySelectorAll(".regHtml-con input");
let loginBtn = document.querySelector(".login-btn");
let loginIpts = document.querySelectorAll(".login input")
let regHtml = document.querySelector(".regHtml");

let userBtn = document.querySelector(".infoContainer .user");
let loginhtml = document.querySelector(".info-con");

let isUsername = false;
let isPassword = false;
let isSePassword = false;
regIpts[0].onfocus = function(){
    this.nextElementSibling.innerHTML = "6-18，数字 字母 下线 ，字母开头";
    this.nextElementSibling.style.color = "gray";

};
regIpts[0].onblur = function(){
    let reg = /^[a-z]\w{5,17}$/i;

    if(this.value.length < 6){
        this.nextElementSibling.innerHTML = "长度不够6位";
        this.nextElementSibling.style.color = "red";
        isUsername = false;
    }else{
        if (reg.test(this.value)) {
            // else 满足   发起请求
            console.log("满足   发起请求");
            axios
              .get(checkusernameAPI, {
                params: { username: regIpts[0].value },
              })
              .then((res) => {
                let obj = res.data;
                console.log(obj);
                this.nextElementSibling.innerHTML = obj.msg;
                if (obj.code == 1) {
                    this.nextElementSibling.style.color = "green";
                  isUsername = true;
                } else {
                    this.nextElementSibling.style.color = "red";
                  isUsername = false;
                }
              });
          } else {
            // 如果不满足正则 提示 只能 只能输入字母、数字、下划线
            this.nextElementSibling.innerHTML = "只能输入字母、数字、下划线";
            this.nextElementSibling.style.color = "red";
            isUsername = false;
        }
    }
};

regIpts[1].onfocus = function(){
    this.nextElementSibling.innerHTML = "最少6位字符，区分大小写";
}
regIpts[1].onblur = function(){
    let reg = /^\S{6,}$/;
    if(reg.test(this.value)){
        this.nextElementSibling.innerHTML = "";
        isPassword = true;
   }else{
        this.nextElementSibling.innerHTML = "格式有误，最少6位字符，区分大小写";
        this.nextElementSibling.style.color = "gray";
        isPassword = false;
   }
}

regIpts[2].onblur = function(){
    if(this.value == regIpts[1].value){
        isSePassword = true;

    }else{
        isSePassword = false;
        this.nextElementSibling.innerHTML = "密码输入不一致"
    }
}
regBtn.onclick = async function(){
    if(isUsername && isPassword && isSePassword){
        let username = regIpts[0].value;
        let password = regIpts[1].value;
        let {data} = await axios.get(regAPI,{params: {username, password} });
        console.log(data);
        if(data.code == 1){
            regHtml.style.display = "none";
            loginhtml.style.display = "block";
            

        }
        alert(data.msg);
    }
}

loginBtn.onclick = async function(){
    let username = loginIpts[0].value;
    let password = loginIpts[1].value;
    let params = {username, password};
    let {data} = await axios.get(loginAPI, {params});
    console.log(data);
    alert(data.msg);
    
    localStorage.setItem("uid", data.data.id);
    localStorage.setItem("token", data.data.token);
    localStorage.setItem("username", data.data.username);

    loginhtml.style.display = "none";

}

let rBtn = document.querySelector(".r-btn");
let infoCon = document.querySelector(".info-con");
let a = document.querySelector(".regHtml a")
rBtn.onclick = function(){
    regHtml.style.display = "block";
    infoCon.style.display = "none";

}
a.onclick = function(){
    regHtml.style.display = "none";
    infoCon.style.display = "block";
}
userBtn.onclick = function(){
    loginhtml.style.display = "block";
}
let cancleBtn = document.querySelectorAll(".cancle-btn");
cancleBtn[0].onclick = function(){
    loginhtml.style.display = "none";
}
cancleBtn[1].onclick = function(){
    regHtml.style.display = "none";
}
